<template>
    <div class="box">
      <!-- 这是首页中一个人气推荐的组件 -->
      <h1>人气推荐</h1>
      <ul>
        <li v-for="item in hotGoodsList" :key="item.id" >
            <img :src="item.list_pic_url" alt="">
           <div>
              <h3>{{item.name}}</h3>
              <p>{{item.goods_brief}}</p>
              <p class="p1">{{item.retail_price | formarMoney}}</p>
           </div>
        </li>
       
      </ul>
    </div>
</template>

<script>
export default {
    name: "HotGoodsList",
    data() {
        return {

        };
    },
    // 使用props来接收父组件传递进来的数据
    props:['hotGoodsList'] ,
   
    mounted(){
      setTimeout(()=>{
      console.log(this.hotGoodsList);
      },200)
    }
};
</script>

<style scoped lang="less">
 .box{
      h1{
        text-align: center;
      }
      ul{
         width:100%;
       
        li{

            height:100px;
            margin-top:10px;
            background-color: #f1f1f1;
            // display: flex;
            img{
              float:left;
              width: 100px;
            }
            div{
                float:left;
                h3{
                  font-size:20px;
                  margin-top:10px;
                }
                p{
                  font-size:18px;
                  margin-top:16px;
                }
                .p1{
                  color:red;
                }
            }
        }
      }
 }
</style>